﻿<html>
<head>
    <title>Results</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

    <!-- jQuery references -->
    <link href="css/themes/default/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
    <link href="css/jqm-docs.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>

    <!-- Wikilookup references -->
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/index.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=vi"></script>

    <script type="text/javascript">
        var lat, lon, key, duongdan;
        var id = 0;
        function findKeywords() {
            var key = document.getElementById('search-mini').value;
            if (!key) return;

            var temp = sessionStorage.getItem('cotim');
            if (temp == '1') {
                sessionStorage.setItem('searchTextFieldA', key);
            } else {
                sessionStorage.setItem('searchTextFieldB', key);
            }

            for (i = 0; i < key.length; i++) key = key.replace(' ', '%20');
            window.location.assign("directions-search.html#" + lat + "@" + lon + "$" + key);
            window.location.reload();
        }

        var map, placesList;
        function initialize() {
            // Lấy dữ liệu kinh, vĩ độ, khóa kiếm --------------------------- \\
            duongdan = location.toString();
            var z = location.toString().indexOf('#');
            var mySearch = location.toString().substr(z + 1);
            var x = mySearch.toString().indexOf('@');
            var y = mySearch.toString().indexOf('$');
            lat = mySearch.toString().substr(0, x);
            lon = mySearch.toString().substr(x + 1, y - x - 1);
            key = mySearch.toString().substr(y + 1);
            for (i = 0; i < key.length; i++) { key = key.replace('%20', ' '); }
            var textsearch = document.getElementById('search-mini');
            var reference = document.getElementById('reference');
            var tendiadiem = document.getElementById('tendiadiem');
            var diachi = document.getElementById('diachi');

            var temp = sessionStorage.getItem('cotim');
            if (temp == '1') {
                key = sessionStorage.getItem('searchTextFieldA');
            } else {
                key = sessionStorage.getItem('searchTextFieldB');
            }
            textsearch.value = key;
            // --------------------------------------------------------------- \\

            // Vị trí hiển thị khi bản đồ hiển thị lần đầu tiên Vị trí hiện tại của điện thoại
            var pyrmont = new google.maps.LatLng(lat, lon);

            // Khởi tạo bản đồ
            map = new google.maps.Map(document.getElementById('map_canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: pyrmont, zoom: 15 });

            // Khởi tạo đối tượng request với từ khóa tìm kiếm
            var request = { query: key };

            // Hiển thị các địa điểm tìm được lên list có ul#places
            placesList = document.getElementById('places');

            // request đến service
            var service = new google.maps.places.PlacesService(map);

            // Gọi hàm callback trả kết quả về
            service.textSearch(request, callback); // đổi hàm sử dụng API Google Place text search
        }

        var _vido, _kinhdo, _id;
        function showOnMap(vido, kinhdo, id) {
            _vido = vido;
            _kinhdo = kinhdo;
            _id = id;
        }
        function viewMap() {
            location = duongdan;
            var referenceXXX = document.getElementById('reference' + _id.toString()).innerHTML;
            window.location.assign("marked.html#" + _vido + "@" + _kinhdo + "$" + referenceXXX);
        }
        function chonDiemNay() {
            var temp = sessionStorage.getItem('cotim');
            var tendiadiemXXX = document.getElementById('tendiadiem' + _id.toString()).innerHTML;
            var diachiXXX = document.getElementById('diachi' + _id.toString()).innerHTML;
            if (temp == '1') {
                sessionStorage.setItem('searchTextFieldA', tendiadiemXXX + ', ' + diachiXXX);
                sessionStorage.setItem('vitribatdau', tendiadiemXXX);
            } else {
                sessionStorage.setItem('searchTextFieldB', tendiadiemXXX + ', ' + diachiXXX);
                sessionStorage.setItem('diadiemden', tendiadiemXXX);
            }
            window.location.assign("directions.html");
        }

        function callback(results, status, pagination) {
            document.getElementById('ketqua').innerHTML = '<b>Không tìm thấy kết quả!</b>';
            if (status != google.maps.places.PlacesServiceStatus.OK) { return; }
            else {
                $("#ketqua").hide(); $("#themkq").show();

                // Nếu có kết quả thì đưa ra danh sách
                for (var i = 0, place; place = results[i]; i++) {
                    var rate = ''; // hiển thị rate nếu có
                    if (place.rating) rate = '<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">' + place.rating + '</span>';

                    placesList.innerHTML += '<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-d ui-li-has-count">' + place.name + rate + '</li>';

                    var imagesString = ''; // Hiển thị hình ảnh nếu có
                    var hinhvar = '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last ui-btn-up-d">';
                    var photos = place.photos;
                    if (photos) {
                        var image = photos[0].getUrl({ 'maxWidth': 80, 'maxHeight': 80 });
                        imagesString = '<img src="' + image + '" class="ui-li-thumb">';
                        hinhvar = '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-li-last ui-btn-up-d">';
                    }

                    var vido = place.geometry.location.lat();
                    var kinhdo = place.geometry.location.lng();
                    reference.innerHTML += '<p id="reference' + id.toString() + '">' + place.reference + '</p>';
                    tendiadiem.innerHTML += '<p id="tendiadiem' + id.toString() + '">' + place.name + '</p>';
                    diachi.innerHTML += '<p id="diachi' + id.toString() + '">' + place.formatted_address + '</p>';

                    placesList.innerHTML += hinhvar + '<div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#menu" data-rel="popup" onclick="showOnMap(' + vido + ',' + kinhdo + ',' + id + ')" class="ui-link-inherit">' + imagesString + '<p class="ui-li-desc"><strong>' + place.formatted_address + '</strong></p><p class="ui-li-desc">' + place.types + '</p></a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>';
                    id++;
                }

                // google hỗ trợ phân trang nếu quá nhiều địa điểm trong kết quả
                if (pagination.hasNextPage) {
                    var moreButton = document.getElementById('more');
                    moreButton.disabled = false;
                    $("#themkq").show();
                    google.maps.event.addDomListenerOnce(moreButton, 'click', function () {
                        moreButton.disabled = true;
                        $("#themkq").hide();
                        pagination.nextPage();
                    });
                }
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div data-role="page" class="type-interior">
        <!-- Start Header -->
        <div data-role="header" data-theme="f" class="ntcHeader" data-position="fixed">
            <h1 style="text-transform: capitalize;"><b>TÌM NHANH</b></h1>
            <a href="start.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
            <a data-ajax="false" href="about.html" data-icon="info" data-iconpos="notext" data-transition="slideup">About</a>
            <div data-role="header" data-theme="a" class="ui-bar ui-grid-a" style="padding: 0px; margin-left: -3px;">
                <div class="ui-block-a" style="width: 70%; padding-top: 4px; padding-left: 5px">
                    <input placeholder="Bạn muốn tìm gì?" type="search" data-theme="d" name="search-mini" id="search-mini" data-mini="true" />
                </div>
                <div class="ui-block-b" style="width: 30%;">
                    <div>
                        <button type="submit" data-theme="b" onclick="findKeywords()">Tìm</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Header -->

        <!-- Start Content -->
        <div class="ntc-content" style="text-transform: none; overflow: hidden;">
            <div id="ketqua" style="text-align: center; margin: 10px;"><b>Vui lòng đợi trong giây lát...</b></div>
            <ul data-role="listview" data-theme="d" data-divider-theme="d" id="places"></ul>
            <div id="themkq" style="display: none;">
                <button id="more" data-theme="e">Tìm thêm</button>
            </div>
        </div>
        <!-- End Content -->

        <!-- Start Footer -->
        <div id="map_canvas" style="display: none;"></div>
        <div id="reference" style="display: none;"></div>
        <div id="tendiadiem" style="display: none;"></div>
        <div id="diachi" style="display: none;"></div>
        <!-- End Footer -->

        <div data-role="popup" id="menu" data-theme="none">
            <ul data-role="listview" data-inset="true" style="min-width: 210px;" data-theme="f">
                <li><a href="#" onclick="chonDiemNay()">Chọn điểm này</a></li>
                <li><a href="#" onclick="viewMap()">Xem trên bản đồ</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
